<template>
  <iframe
      id="myIframe"
      class="map"
      frameborder="0"
      allowfullscreen="true"
      webkitallowfullscreen="true"
      mozallowfullscreen="true"
      :src="url"
  >
  </iframe>
</template>

<script setup name="Map">
import {onMounted, onUnmounted, markRaw, ref, getCurrentInstance} from "vue";
import {useFantasyStore} from "../../store/index.js";

let map = null;
const fantasy3DStore = useFantasyStore()

const { ctx } = getCurrentInstance();
const url = ref('')
url.value = import.meta.env.VITE_APP_MAP

onMounted(() => {
  window.addEventListener('message', $acceptData)
});

const $acceptData = (e) => {

  let data = e.data;
  let param = data.param;

  if (param) {
    if(!param.hasOwnProperty('mapStatus'))  return

    let iframe = document.getElementById("myIframe")

    ctx.IframeDomS = iframe;
    ctx.mapStatus = param.mapStatus;
    ctx.modelStatus = param.modelStatus;

    fantasy3DStore.$state.$Dom = iframe
    fantasy3DStore.$state.mapStatus = ctx.mapStatus
    fantasy3DStore.$state.modelStatus = ctx.modelStatus

    // ctx.$once('hook:beforeDestroy', () => {
    //   window.removeEventListener('message',$acceptData);
    // },false)

  }
  else {
    // console.log('地图加载中，请等待')
  }
}

onUnmounted(() => {

});
</script>

<style scoped>
.map, iframe, iframe >html {
  width: 100%;
  height: 100%;
}
</style>
